<extend name="Public/base"/>
<block name="style">
<style>
    .modules-box {
        position: relative;
        background:#fff;
        border:1px solid #eee;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        margin-bottom:10px;
        font-size:2em;
        cursor:pointer;
    }
    .modules-radio {
        height:120px;
        background: #03B8CF;
        color:#fff;
        text-align: center;
        line-height: 120px;
    }
    .selected {
        
    }
    .mask {
        position: absolute;
        top:0;
        left:0;
        background:rgba(0,0,0,0.4);
        width:100%;
        height:100%;
    }
    .mask i {
        float:right;
        margin-top:10px;
        margin-right:10px;
        font-size:38px;
        color:#f90;
    }
</style>
</block>
<block name="body">
    <div class="main-title">
        <h2>{:L('_PACK_MODULE_GUIDE_')}
            
        </h2>
    </div>

    <div class="with-padding">
        <p class="">{:L('_PACK_WELCOME_')}</p>

        <form action="{:U('module1')}" method="post">
            <div class="clearfix">
                <div class="col-xs-12">
                    <p class="lead">{:L('_PACK_MODULE_SELECT_')}</p>

                    <div>
                        <volist name="modules" id="vo">
                        
                            <label class="col-xs-3">
                            <div class="modules-box" data-type="modules-box">

                                <div class="modules-radio ">
                                    <input id="m_{$vo.name}" class="hidden" type="radio" name="module" value="{$vo.name}"> {$vo.name}
                                </div>
                                <div class="modules-alias">
                                    <h3 class="text-center">{$vo.alias}</h3>
                                </div>
                                <div class="mask hidden">
                                    <i class="icon icon-check-circle-o"></i>
                                </div>
                            </div>
                            </label>
                        
                        </volist>
                    </div>
                </div>
                <div class="col-xs-12">
                    <p class="lead">
                        {:L('_PACK_PROCESS_')}
                    </p>
                    <blockquote>
                        <ol>
                            <li>{:L('_PACK_STEP_ONE_')}</li>
                            <li>{:L('_PACK_STEP_TWO_')}</li>
                            <li>{:L('_PACK_STEP_THREE_')}</li>
                            <li>{:L('_PACK_STEP_FOUR_')}</li>
                        </ol>
                    </blockquote>
                    <p>{:L('_PACK_DECLARE_')}</p>
                </div>


            </div>
            <div class="clearfix">
                <div class="with-padding ">
                    <input class="btn btn-lg btn-default btn-success btn-block" type="submit" value="{:L('_PACK_AGREE_START_')}">

                    </input>
                </div>
            </div>
        </form>


    </div>
    <script>
+ function($) {
    'use strict';
    // 模块选择
    // ===============================
    var moduleChannel = function() {
        this.init('moduleChannel');
    }
    moduleChannel.prototype.init = function(type) {
        $('div[data-type="modules-box"]').on('click', function() {
            $('div[data-type="modules-box"]').removeClass("selected");
            $('div[data-type="modules-box"]').find('.mask').addClass("hidden");
            $(this).addClass("selected");
            $(this).find('.mask').removeClass('hidden');
        });
        $('div[data-type="modules-box"]:first').trigger("click");//执行一次支付方式选择点击
    }

    moduleChannel.prototype.channelName = function() {
        //获取支付方式
        return $('[data-toggle="paychannel"].selected').find('input').val();
     }

    $.fn.moduleChannel = new moduleChannel();

}(jQuery);

//$.fn.payChannel.channelName();
</script>
</block>